<template>
  <div style="display: inline-block;text-align: left;">
    <el-button type="primary" size="small" @click="addUser()">
            {{$t('staff.batchDevice')}}
    </el-button>
    <el-dialog v-if="dialogTableVisible" :before-close="closeDia" :visible.sync="dialogTableVisible" :title="$t('table.add')" width="40%">
      <el-form ref="formData" :model="formData"  reset-field label-position="right" label-width="auto">
        <el-form-item :label="$t('staff.access_authorization')" prop="atclik">
          <el-select  v-model="atclik" multiple>
            <!-- <el-option :label="$t('staff.all_device')" value="*" /> -->
            <el-option v-for="(item, index) in Equipment" :key="index" :label="item.device_name" :value="item.sn" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item :label="$t('table.department')" prop="id">
          <el-select v-model="formData.id" clear>
            <el-option v-for="(item, index) in department_list" :key="index" :label="item.department" :value="item.id" />
          </el-select>
        </el-form-item> -->
        <el-form-item align="right">
          <div>
            <el-button type="primary" size="small" @click="submitForm()">{{
              $t("table.complete")
            }}</el-button>
            <el-button size="small" @click="closeDia()">{{
              $t("table.cancel")
            }}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import store from "@/store";
import { get_list } from "@/api/organization_manage/organization_manage";
import {
  push_get_list,
  service_batchDevice
} from "@/api/user_manage/user_manage";
export default {
  props:['multipleSelection'] ,
  data() {
    return {
      dialogTableVisible:false,
      Equipment: [],
      formData: {},
      atclik: [],

    };
  },
  created() {
    this.time();
  },
  methods: {
    addUser(){
      console.log(this.multipleSelection,'this,row_id')
      this.dialogTableVisible = true;
      push_get_list(store.getters.token).then((res) => {
        console.log(res, "rrraa");
        this.Equipment = res.data.list.data;
      });
    },

 // 部门数据
  //  CompanyIndex(id){
  //      console.log(id,'id')
  //      department_get_select(store.getters.token, { company_id: id }).then(
  //       (res) => {
  //         this.department_list = res.data.list;
  //         console.log(this.department_list, "this,department_list");
  //         console.log(res, "res.data.list");
  //       }
  //     );
  //  },
   departmentNull(type) {
      if (type) {
        this.$set(this.formData, "id", "");
      }
    },
    //提交数据
    submitForm(){
      console.log(this.atclik,'atclik')
      var data = {
        sn: this.atclik,
        person_id: this.multipleSelection
      }
       if(this.multipleSelection == ""){
        this.$message.error(this.$t('staff.batchDeviceTip'))
      }else{
        service_batchDevice(store.getters.token, data).then(res => {
        if (res.data.status) {
          this.$message.success(this.$t("table.edit_complete"));
          this.$emit("getLists");
          this.dialogTableVisible = false;
        }else{
          this.$message.error(this.$t("table.add_fail") + res.data.msg)
        }
      });
      }
    },
    
    // 关闭弹窗
    closeDia() {
      this.atclik = ''
      this.dialogTableVisible = false;
    },
    
  },
};
</script>

<style scoped>
/* 上传图片样式 */
.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 2px dashed #cccccc;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  margin: auto;
}
.avatar {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%,0);
  width: auto;
  height: 178px;
  display: block;
}
</style>
